<!-- <template>
	<div class="plane">
		<ul v-for="ulnum in 6" :key="ulnum" :class="'ulnum-'+ulnum">
			<li v-for="linum in 25" :key="linum" :class="'linum-'+ulnum+'-'+linum">
				<img src="../assets/logo2.png" >
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'App',
		data(){
			return{
				linum:100
			}
		}
	}
</script>

<style lang="scss">
	@keyframes spin {
		0% {
			transform: rotateZ(0deg) rotateY(45deg) rotateX(0deg);
		}
		100% {
			transform: rotateZ(360deg) rotateY(405deg) rotateX(360deg);
		}
	}
	img{
		width: 45px;
		height: 45px;
		border-radius: 45px;
	}
	.plane {
		width: 100px;
		height: 100px;
		margin: 350px auto;
		transform-style: preserve-3d;
		transform-origin: 50px 50px;
		-webkit-animation: spin 40s infinite linear;
		animation: spin 40s infinite linear;
	}
	.plane ul {
		padding: 0;
		margin: 0;
		list-style: none;
		width: 100%;
		height: 100%;
		position: absolute;
		transform-style: preserve-3d;
	}
	.plane li{
		position: absolute;
		border-radius: 45px;
		opacity: 0.8;
		display: flex;
		align-items: center;
		justify-content: center;
		// background-color: red;
	}
	@for $i from 1 through 6 {
		.ulnum-#{$i}{transform: rotateX(($i - 1) * 36deg);}
		@for $j from 1 through 24{
			.linum-#{$i}-#{$j}{transform: rotateY(($j - 1) * 15deg) translateZ(387px);}
		}
    }
	li:nth-child(25){
		display: none;
	}
	li {
		&:nth-child(1),
		&:nth-child(2),
		&:nth-child(12),
		&:nth-child(13),
		&:nth-child(14),
		&:nth-child(24){
            width:70px; 
            height:70px; 
            left:15px; 
            top:15px;
			img{
				width:70px;
				height:70px; 
				border-radius: 70px;
			}
		}
		&:nth-child(3),
		&:nth-child(11),
		&:nth-child(15),
		&:nth-child(23){
            width:64px; 
            height:64px; 
            left:18px; 
            top:18px;
			img{
				width:64px;
				height:64px; 
				border-radius: 64px;
			}
		}
		&:nth-child(4),
		&:nth-child(10),
		&:nth-child(16),
		&:nth-child(22){
            width:58px; 
            height:58px; 
            left:21px; 
            top:21px;
			img{
				width:58px;
				height:58px; 
				border-radius: 58px;
			}
		}
		&:nth-child(5),
		&:nth-child(9),
		&:nth-child(17),
		&:nth-child(21){
			width:54px; 
            height:54px; 
            left:23px; 
            top:23px;
			img{
				width:54px;
				height:54px; 
				border-radius: 54px;
			}
		}
		&:nth-child(6),
		&:nth-child(8),
		&:nth-child(18),
		&:nth-child(20){
            width:52px; 
            height:52px; 
            left:24px; 
            top:24px;
			img{
				width:52px;
				height:52px; 
				border-radius: 52px;
			}
		}
		&:nth-child(7),
		&:nth-child(19){
            width:50px; 
            height:50px; 
            left:25px; 
            top:25px;
			img{
				width:50px;
				height:50px; 
				border-radius: 50px;
			}
		}
	}
	.plane ul:nth-child(2) li:nth-child(19),
	.plane ul:nth-child(3) li:nth-child(19),
	.plane ul:nth-child(4) li:nth-child(19),
	.plane ul:nth-child(5) li:nth-child(19),
	.plane ul:nth-child(6) li:nth-child(19),
	.plane ul:nth-child(7) li:nth-child(19),
	.plane ul:nth-child(8) li:nth-child(19),
	.plane ul:nth-child(9) li:nth-child(19),
	.plane ul:nth-child(10) li:nth-child(19),
	.plane ul:nth-child(11) li:nth-child(19),
	.plane ul:nth-child(12) li:nth-child(19)
	{
		display:none;
	}
	.plane ul:nth-child(2) li:nth-child(7),
	.plane ul:nth-child(3) li:nth-child(7),
	.plane ul:nth-child(4) li:nth-child(7),
	.plane ul:nth-child(5) li:nth-child(7),
	.plane ul:nth-child(6) li:nth-child(7),
	.plane ul:nth-child(7) li:nth-child(7),
	.plane ul:nth-child(8) li:nth-child(7),
	.plane ul:nth-child(9) li:nth-child(7),
	.plane ul:nth-child(10) li:nth-child(7),
	.plane ul:nth-child(11) li:nth-child(7),
	.plane ul:nth-child(12) li:nth-child(7)
	{
		display:none;
	}
</style>
 -->